<div class="main-content">

    <div class="header bg-white a-shadow-light-s sticky-top">

        <div class="row mx-0">

            <ul class="col-12 col-xl-8 nav nav-tabs  mt-2 px-4">
                <li class="nav-item">
                    <a class="py-3 nav-link [if[::constants.Params.payment=stripe::active]if]" href="#" onclick="Aps.query.addFilter('payment','stripe')">
                        <span class="text-md">银行卡支付</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="py-3 nav-link [if[::constants.Params.payment=paypal::active]if]" href="#" onclick="Aps.query.addFilter('payment','paypal')">
                        <span class="text-md">Paypal支付</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="py-3 nav-link [not[::constants.Params.payment::active]not]" href="#" onclick="Aps.query.removeFilter('payment')">
                        <span class="text-md">{i18n{ status.all }i18n}</span>
                    </a>
                </li>
            </ul>

            <div class="col-12 col-xl-4 nav-tabs">

            </div>


        </div>


        <div class="row mx-3 py-2">

            <div class="col-auto">
                <div class="dropdown my-2">

                    <button class="btn btn-sm dropdown-toggle [not[::constants.Params.sort::btn-white]not] [if[::constants.Params.sort::btn-secondary]if]" type="button" id="dropdownMenuButtonViewtimes" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        {i18n{ manager.sort }i18n}
                    </button>

                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonViewtimes" style="">
                        <a class="dropdown-item" onclick="Aps.query.removeFilter('order');" >{i18n{ status.default }i18n}</a>
                        <a class="dropdown-item" onclick="Aps.query.addFilter('order','amount DESC');" > 按金额 从高到低<i class="fe fe-arrow-down"></i></a>
                        <a class="dropdown-item" onclick="Aps.query.addFilter('order','createtime DESC');" >按时间 最近<i class="fe fe-arrow-up"></i></a>
                    </div>
                </div>
            </div>

            <div class="col-auto">
                <div class="dropdown my-2">
                    <button class="btn btn-sm btn-white dropdown-toggle" type="button" id="dropdownMenuButtonSize" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="fe fe-list mr-1"></span> {i18n{ manager.sizePerPage }i18n} [not[::constants.Params.size::10]not]{{constants.Params.size}}
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonSize" style="">
                        <a class="dropdown-item" href="" onclick="Aps.query.removeFilter('size');">{i18n{default}i18n}</a>

                        <a class="dropdown-item" href="" onclick="Aps.query.addFilter('size','8');">8</a>

                        <a class="dropdown-item" href="" onclick="Aps.query.addFilter('size','12');">12</a>

                        <a class="dropdown-item" href="" onclick="Aps.query.addFilter('size','24');">24</a>

                        <a class="dropdown-item" href="" onclick="Aps.query.addFilter('size','48');">48</a>

                        <a class="dropdown-item" href="" onclick="Aps.query.addFilter('size','120');">120</a>

                    </div>
                </div>
            </div>

        </div>


    </div>




    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-12">

                <div class="card">

                    <div class="tab-content">

                        <div class="tab-pane table-responsive active mb-0">
                            <table class="table table-sm card-table" >
                                <thead>
                                <tr>
                                    <th>支付id</th>
                                    <th>订单号</th>
                                    <th>金额</th>
                                    <th>支付方式</th>
                                    <th>支付流水号</th>
                                    <th>{i18n{ manager.createtime }i18n}</th>
                                    <th>{i18n{ manager.status }i18n}</th>
                                </tr>
                                </thead>
                                <tbody class="list">
                                [not[::productList::
                                <tr>
                                    <td colspan="10">
                                        <div class="row justify-content-center">
                                            <div class="col-12 col-md-8 col-xl-6 py-5">

                                                <h2>
                                                    {i18n{SYS_NON}i18n}
                                                </h2>

                                                <a class="btn btn-primary lift" onclick="Aps.router.back(-1)">
                                                    {i18n{ back }i18n}
                                                </a>

                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                ]not]

                                ||loop??productList??
                                <tr class="col-6 col-md-4 col-lg-12">
                                    <td class="p-2">
                                        {{paymentid}}
                                    </td>
                                    <td class="p-2">{{orderid}}</td>
                                    <td class="p-2 a-text-l">${{amount}}</td>
                                    <td class="p-2">{{payment}}</td>
                                    <td class="p-2">{{paymenttradeno}}</td>
                                    <td class="p-2">{{CREATETIME}}</td>
                                    <td class="p-2 [if[::status=trash::text-muted]if]">{{status_}}</td>

                                </tr>
                                loop||
                                </tbody>
                            </table>
                        </div>

                    </div>

                </div>

                <nav aria-label="Page navigation example">
                    <ul class="pagination">

                        [if[::pager.first::
                        <li class="page-item"><a class="page-link" href="#" onclick="Aps.query.addFilter('page','1')">{i18n{ firstPage }i18n}</a></li>
                        ]if]

                        [if[::pager.prev::
                        <li class="page-item"><a class="page-link" href="#" onclick="Aps.query.addFilter('page','{{pager.prev}}')">{i18n{ prevPage }i18n}</a></li>
                        ]if]

                        ||loop??pager.list??
                        [if[::current:: <li class="page-item active"><a class="page-link" href="#" >{{page}}</a></li> ]if]
                        [not[::current::<li class="page-item"><a class="page-link" href="#" onclick="Aps.query.addFilter('page','{{page}}')">{{page}}</a></li> ]not]
                        loop||

                        [if[::pager.next::
                        <li class="page-item"><a class="page-link" href="#" onclick="Aps.query.addFilter('page','{{pager.next}}')">{i18n{ nextPage }i18n}</a></li>
                        ]if]

                        [if[::pager.last::
                        <li class="page-item"><a class="page-link" href="#" onclick="Aps.query.addFilter('page','{{pager.last}}')">{i18n{ lastPage }i18n} ({{pager.last}})</a></li>
                        ]if]

                    </ul>
                </nav>


            </div>
        </div> <!-- / .row -->
    </div>
</div>